import './requestNextAnimationFrame.js'
import * as C from './const.js'
import {Coord} from "./coord";
import {State} from "./state";
import {Klotski} from "./klotski";

let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let size = context.canvas.width / C.COL_NUM
let m = new Map()
m.set(C.T_MA, new Coord(0, 0))
m.set(C.T_CAO, new Coord(1, 0))
m.set(C.T_ZHAO, new Coord(3, 0))
m.set(C.T_HUANG, new Coord(0, 2))
m.set(C.T_ZHANG, new Coord(3, 2))
m.set(C.T_GUAN, new Coord(1, 2))
m.set(C.T_BING1, new Coord(0, 4))
m.set(C.T_BING2, new Coord(1, 3))
m.set(C.T_BING3, new Coord(2, 3))
m.set(C.T_BING4, new Coord(3, 4))
m.set(C.T_FREE1, new Coord(1, 4))
m.set(C.T_FREE2, new Coord(2, 4))
let state = new State()
for (let k of m.keys()) {
  state.set_coord(k, m.get(k).x,  m.get(k).y)
}

let step_time = 300
let klotski = new Klotski(m)
let result = klotski.get_result()
let t_start = new Date().getTime()
let type = null
function draw_chess(x, y, w, h, text) {
  x *= size
  y *= size
  w *= size
  h *= size
  context.strokeRect(x, y, w, h)
  context.fillText(text, x + w / 2, y + h / 2)
}

function get_coord(x, y, ratio, direction) {
    if (direction == C.UP) {
      return new Coord(x, y - ratio)
    } else if (direction == C.RIGHT) {
      return new Coord(x + ratio, y)
    } else if (direction == C.DOWN) {
      return new Coord(x, y + ratio)
    } else {
      return new Coord(x - ratio, y)
    }
}

function draw_state(s, step, ratio) {
  for (let item of C.CHESS_LIST) {
    let coord = s.get_coord(item)
    if (step != null && item == step.index) {
      let tmp = get_coord(coord.x, coord.y, ratio, step.direction)
      coord.x = tmp.x
      coord.y = tmp.y
    }
    if (item == C.T_MA || item == C.T_HUANG || item == C.T_ZHAO || item == C.T_ZHANG) {
      draw_chess(coord.x, coord.y, 1, 2, C.CHESS_MAP.get(item))
    } else if (item == C.T_BING1 || item == C.T_BING2 || item == C.T_BING3 || item == C.T_BING4) {
      draw_chess(coord.x, coord.y, 1, 1, C.CHESS_MAP.get(item))
    } else if (item == C.T_GUAN) {
      draw_chess(coord.x, coord.y, 2, 1, C.CHESS_MAP.get(item))
    } else {
      draw_chess(coord.x, coord.y, 2, 2, C.CHESS_MAP.get(item))
    }
  }
}

function animate() {
  context.clearRect(0,0, canvas.width, canvas.height)
  if (type == 2) {
    let escape = new Date().getTime() - t_start
    let state_index = Math.floor(escape / step_time)
    let ratio1 = (escape % step_time) / step_time
    let step = null
    if (state_index < result.length - 1) {
      step = result[state_index + 1].get_step()
    } else {
      state_index = result.length - 1
    }
    draw_state(result[state_index], step, ratio1)
  } else {
    draw_state(result[0], null, null)
  }
  window.requestNextAnimationFrame(animate)
}

let btn_start = document.getElementById('start')
let btn_init = document.getElementById('init')
btn_start.onclick = function() {
  t_start = new Date().getTime()
  type = 2
}
btn_init.onclick = function() {
  type = 1
}

window.requestNextAnimationFrame(animate)